<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('路线地图')" />
</head>
<body class="white-bg">
    <div id="map" style="width: 100%;height: 98vh;">

    </div>
<div th:include="include::footer"></div>
<div th:include="include::map"></div>
<script th:inline="javascript">
    var map;
    var features = new L.FeatureGroup();
    var prefix = ctx + "roadnet/baseBridge";
    var data=[[${bridge}]];
    $(function () {
        LoadMap();
        Addleayer();
    });
    function LoadMap() {
        InitializeMap(32.223, 120.977, 9, 9);
    }
    function Addleayer () {
        var shape = data.shape.toString();

        var start = shape.indexOf('(')
        var end = shape.indexOf(')');
        var shapeOld = shape.substring(start + 1, end).split(" ");
        var akjf = "";
        if (data.spantype == 1) akjf = "特大桥";
        if (data.spantype == 2) akjf = "大桥";
        if (data.spantype == 3) akjf = "中桥";
        if (data.spantype == 4) akjf = "小桥";

        var num = data.bridgecenternum.toString().indexOf(".");

        var zh = convertToKPlus(parseFloat(data.BridgeCenterNum));
        var popUpInf = "<div id='popUpInf'><div class='' style='cursor: move;border-bottom: 1px solid #D5D5D5;font-weight: bold;' move='ok'>桥梁基本信息</div>" +
            "<div id='popDiv' style='width: 330px; height: 280px; margin-top: 10px;'>" +
            "<table style='width: 100%; height: 100%;'>" +
            "<tr>" +
            "<td class='tdclass'>桥梁名称：</td>" +
            "<td><div id = 'codeM' style = 'width: 180px;'>" + data.name + "</div></td>" +
            " </tr> " +
            "<tr>" +
            "<td class='tdclass'>桥梁编码：</td>" +
            "<td><div id = 'codeM' style = 'width: 180px;'>" + data.code.substring(0, 10) + "-" + data.code.substring(10, 15) + "</div></td>" +
            " </tr> " +
            "<tr>" +
            "<td class='tdclass'>线路名称：</td>" +
            "<td><div id = 'codeM' style = 'width: 180px;'>" + data.roadname + "</div></td>" +
            " </tr> " +
            "<tr>" +
            "<td class='tdclass'>线路编码：</td>" +
            "<td><div id = 'codeM' style = 'width: 180px;'>" + data.roadcode + "</div></td>" +
            " </tr> " +
            "<tr>" +
            "<td class='tdclass'>中心桩号：</td>" +
            "<td><div id = 'codeM' style = 'width: 180px;'>" + zh + "</div></td>" +
            " </tr> " +
            "<tr>" +
            "<td class='tdclass'>桥梁长度：</td>" +
            "<td><div id = 'codeM' style = 'width: 180px;'>" + data.bridgelength + "(米)" + "</div></td>" +
            " </tr> " +
            "<tr>" +
            "<td class='tdclass'>跨径合计：</td>" +
            "<td><div id = 'codeM' style = 'width: 180px;'>" + data.spansum + "(米)" + "</div></td>" +
            " </tr> " +
            "<tr>" +
            "<td class='tdclass'>桥梁类型：</td>" +
            "<td><div id = 'codeM' style = 'width: 180px;'>" + akjf + "</div></td>" +
            " </tr> " +
            "<tr>" +
            "<td class='tdclass'>所属机构：</td>" +
            "<td><div id = 'codeM' style = 'width: 200px;'>" + data.mantainunitname + "</div></td>" +
            " </tr> " +
            "<tr>" +
            "<td class='tdclass'><a class='btn btn-primary' style='color:white;' id='ViewDeatil' onclick=$.operate.detailForm('" + data.id +"','"+prefix+"/view/{id}"+ "') style='cursor:pointer'>查看详情</a></td>" +
            "<td style='width: 80px;'><a class='btn btn-primary' style='color:white;' id='ViewPhoto' onclick=ViewPhoto('B','" + data.GUID + "') style='cursor:pointer'>查看图片</a></td>" +
            "</tr> " +
            "</table >" +
            "</div>" +
            "</div>";
        var LeafIcon = L.Icon.extend({
            options:
                {
                    shadowUrl: '/map/leaflet1.2.0/images/marker-shadow.png',
                    iconSize: [60, 60],
                    iconAnchor: [29, 60],
                    popupAnchor: [1, -34],
                    tooltipAnchor: [16, -28],
                    shadowSize: [41, 41]
                }
        });

        var redIcon = new LeafIcon({
            iconUrl: '/map/leaflet1.2.0/images/AnchorBlue.png',
            shadowSize: [0, 0]
        });
        L.marker([shapeOld[1], shapeOld[0]], { icon: redIcon }).
        addTo(features).
        bindPopup(popUpInf).
        openPopup();
        features.addTo(map);
        map.setView([shapeOld[1], shapeOld[0]], 15);

    }
    function convertToKPlus(num) {
        return 'K' + num.toFixed(3).replace('.', '+');
    }

</script>
</body>
</html>
